<template>
  <div class="container">
    <toolbar :back="true">
      <div slot="tab">
        <cube-tab-bar v-model="selectedLabel" show-slider ref="tabNav" :data="tabLabels">
          <cube-tab v-for="item in tabLabels" :label="item.id" :key="item.id">
            <div class="tab-item">{{item.label}}</div>
          </cube-tab>
        </cube-tab-bar>
      </div>
    </toolbar>
    <div class="t-container tab-slide-container">
      <cube-slide
          ref="slide"
          :loop="false"
          :initial-index="initialIndex"
          :auto-play="false"
          :show-dots="false"
          :options="slideOptions"
          @scroll="scroll"
          @change="changePage"
        >
          <!--未读-->
          <cube-slide-item>
            <notice-list :type="notice.NO_READER"></notice-list>
          </cube-slide-item>

          <!--全部-->
          <cube-slide-item>
            <notice-list :type="notice.ALL"></notice-list>
          </cube-slide-item>
        </cube-slide>
    </div>
  </div>
</template>

<script>
import Toolbar from "../components/Toolbar";

import NoticeList from './components/List'

import { findIndex, show } from "utils/Base";
import { config } from "assets/js/data";

export default {
  name: "NoticeIndex",
  components: {
    Toolbar,
    NoticeList
  },
  data() {
    return {
      selectedLabel: config.notice.NO_READER,
      tabLabels: [
        { id: config.notice.NO_READER, label: "未读" },
        { id: config.notice.ALL, label: "全部" }
      ],
      slideOptions: {
        listenScroll: true,
        probeType: 3,
        directionLockThreshold: 0
      },
      notice: config.notice
    };
  },
  computed: {
    initialIndex() {
      let index = 0;
      return findIndex(this.tabLabels, item => item.id === this.selectedLabel);
    }
  },
  methods: {
    scroll(pos) {
      const x = Math.abs(pos.x);
      const tabItemWidth = this.$refs.tabNav.$el.clientWidth;
      const slideScrollerWidth = this.$refs.slide.slide.scrollerWidth;
      const deltaX = (x / slideScrollerWidth) * tabItemWidth;
      this.$refs.tabNav.setSliderTransform(deltaX);
    },
    changePage(current) {
      this.selectedLabel = this.tabLabels[current].id;
    }
  }
};
</script>

<style lang="stylus" scoped>
.container {
  & >>> .cube-tab-bar-slider {
    width: 16px !important;
    left: calc((100% / 2) / 2 - 8px);
    background-color: $colorPrimary;
  }

  & >>> .cube-tab_active {
    color: $colorPrimary;
  }
}
</style>
